<template>
  <div class="forgetPwd">
    <div class="step1" v-if='flag[0]'>
      <el-steps :active="0" align-center process-status="warn" finish-status="warn">
        <el-step title="步骤1-填写用户信息"></el-step>
        <el-step title="步骤2-修改密码"></el-step>
        <el-step title="步骤3-完成"></el-step>
      </el-steps>
      <div class="s-content">
        <div class="sc-line">
          <input type="text" placeholder="请输入您的手机号码" class="phone" v-model='phone'>
        </div>
        <div class="sc-line">
          <input type="text" placeholder="获取验证码" class="verifyCode" v-model='code'>
          <div class="getCode" @click='getyzm'>获取验证码</div>
        </div>
        <div class="nextStep" @click="changeStep2()">下一步</div>
      </div>
    </div>
    <div class="step2" v-if='flag[1]'>
      <el-steps :active="1" align-center process-status="warn" finish-status="warn">
        <el-step title="步骤1-填写用户信息" icon="el-icon-circle-check"></el-step>
        <el-step title="步骤2-修改密码"></el-step>
        <el-step title="步骤3-完成"></el-step>
      </el-steps>
      <div class="s-content">
        <div class="sc-line">
          <input type="password" placeholder="请输入新密码" class="pwd1" v-model='password'>
        </div>
        <div class="sc-line">
          <input type="password" placeholder="请再次输入新密码确认" class="pwd2" v-model='surepassword'>
        </div>
        <div class="nextStep" @click="changeStep3()">下一步</div>
      </div>
    </div>
    <div class="step3" v-if='flag[2]'>
      <el-steps :active="2" align-center process-status="warn" finish-status="warn">
        <el-step title="步骤1-填写用户信息" icon="el-icon-circle-check"></el-step>
        <el-step title="步骤2-修改密码" icon="el-icon-circle-check"></el-step>
        <el-step title="步骤3-完成" icon="el-icon-circle-check"></el-step>
      </el-steps>
      <div class="s-content">
        <div class="success"></div>
        <p>修改成功！</p>
        <i>请重新登录～</i>
      </div>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
import { Message } from "element-ui";
import { setTimeout } from "timers";

export default {
  name: "forgetPwd",
  data() {
    return {
      phone: "",
      code: "",
      flag: [true, false, false],
      password: "",
      surepassword: ""
    };
  },
  components: {},
  mounted() {
    $(".forgetPwd").height($(window).height());
    $(window).resize(function() {
      $(".forgetPwd").height($(window).height());
    });
  },
  methods: {
    getyzm() {
      if (this.phone.trim() === "") {
        return Message({
          message: "手机号码为空",
          type: "error"
        });
      }
      if (!/^1[34578]\d{9}$/.test(this.phone)) {
        return Message({
          message: "手机号码不存在",
          type: "error"
        });
      }
          // 倒计时
       let count = 60;
       $(".getCode")
         .css("pointer-events", "none")
         .text(count + "秒后重新发送");
       t.timer = setInterval(function() {
         if (count > 0) {
           count = count - 1;
           $(".getCode").text(count + "秒后重新发送");
         } else {
           $(".getCode").css("pointer-events", "");
           $(".getCode").text("获取验证码");
           count = 60;
           clearInterval(timer);
         }
       }, 1000);
      u.yzm({ phone: this.phone }, data => {
        if (data && data.code == "000000") {
          return Message({
            message: "验证码发送成功",
            type: "success"
          });
        } else {
          return Message({
            message: "验证码发送失败，请重新获取",
            type: "error"
          });
        }
      });
    },
    changeStep2() {
      if (this.code.trim() === "") {
        return Message({
          message: "验证码为空",
          type: "error"
        });
      }
      if (!/^1[34578]\d{9}$/.test(this.phone)) {
        return Message({
          message: "请填写正确的手机号码",
          type: "error"
        });
      }
      u.wjpasswordyz({ code: this.code, phone: this.phone }, data => {
        if (data && data.code == "200") {
          this.flag = [false, true, false];
        }
      });
    },
    changeStep3() {
      if (this.password.trim() === "") {
        return Message({
          message: "请输入修改后的密码",
          type: "error"
        });
      }
      if (this.password.trim().length < 6) {
        return Message({
          message: "密码安全性太低，请设置6位以上的密码",
          type: "error"
        });
      }
      if (this.password.trim() !== this.surepassword.trim()) {
        return Message({
          message: "两次密码输入不一致",
          type: "error"
        });
      }
      u.wjpassword(
        {phone: this.phone, password: this.password },
        data => {
          if (data && data.code == "200") {
            this.flag = [false, false, true];
            setTimeout(() => {
              this.$router.push({ path: "/login" });
            }, 1000);
          }
        }
      );
    }
  }
};
</script>
<style lang="stylus" type='text/stylus' scoped>
.forgetPwd {
  padding: 0 28%;
  width: 100%;
  height: 100%;

  >div {
    padding-top: 11%;

    .s-content {
      padding: 0 11%;
      padding-top: 18%;
      width: 100%;
      box-sizing: border-box;

      .sc-line {
        margin-bottom: 24px;
        width: 100%;
        height: 60px;

        input {
          display: inline-block;
          padding-left: 27px;
          height: 100%;
          font-size: 16px;
          color: #646b77;
          outline: none;
          border-radius: 4px;
          border: 1px solid #ded8c5;
          vertical-align: top;

          &:focus {
            border-color: #ffb001;
          }

          &::-webkit-input-placeholder {
            color: #b8bcc5;
          }

          &:-moz-placeholder {
            color: #b8bcc5;
          }
        }

        .phone {
          width: 100%;
        }

        .verifyCode {
          margin-right: 3%;
          width: 68%;
        }

        .pwd1 {
          width: 100%;
        }

        .pwd2 {
          width: 100%;
        }

        .getCode {
          display: inline-block;
          width: 27%;
          height: 100%;
          font-size: 16px;
          color: white;
          background: #ffb001;
          text-align: center;
          line-height: 60px;
          border-radius: 4px;
          vertical-align: top;
          cursor: pointer;
        }
      }

      .nextStep {
        margin-top: 45px;
        width: 100%;
        height: 60px;
        font-size: 18px;
        line-height: 60px;
        text-align: center;
        color: white;
        background: #ffb001;
        border-radius: 4px;
        cursor: pointer;
      }
    }
  }

  .step2 {
  }

  .step3 {
    .s-content {
      width: 100%;
      height: 500px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      text-align: center;

      .success {
        width: 207px;
        height: 177px;
        background: url('../../../static/images/stepSuccess.png') center no-repeat;
        background-size: 100% 100%;
        margin: 0 auto;
        margin-bottom: 40px;
      }

      p {
        font-size: 18px;
      }

      color: #3d3d3d;

      i {
        color: #999999;
        font-size: 14px;
        margin-top: 15px !important;
      }
    }
  }
}
</style>
<style >
.el-step__icon-inner[class*="el-icon"]:not(.is-status) {
  color: #ffb001 !important;
}
.el-step__icon.is-text {
  border-color: #e8e8e8 !important;
}
</style>

